<template>
  {{ d.num.toFixed(0) }}
</template>

<script setup>
import { reactive, watch } from "vue";
import gsap from "gsap";

const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});

const d = reactive({
  num: 0,
});

function AnimateToValue() {
  gsap.to(d, {
    duration: 0.5,
    num: props.value,
  });
}

AnimateToValue();

watch(
  () => props.value,
  () => AnimateToValue()
);
</script>

<style scoped></style>
